<template>
  <div class="student-main">
    <el-card class="box-card searchbox" shadow="hover">
      <div slot="header" class="clearfix">
        <span>搜索条件</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="search.name" placeholder="根据名字查询" size="small"></el-input>
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="search.startTime"
            size="small"
            type="date"
            placeholder="选择开始日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-date-picker
            v-model="search.endTime"
            size="small"
            type="date"
            placeholder="选择结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-input v-model="search.sexv" placeholder="根据性别查询" size="small"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-select v-model="search.classId" placeholder="请选择班级">
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.className"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6" :offset="12" style="text-align:right">
          <el-button type="primary" size="small" @click="doReset">重置</el-button>
          <el-button type="primary" plain size="small" @click="doSearch">查询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 搜索结束,表单开启 -->
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>表格数据</span>
        <el-button type="primary" @click="addInfo" size="small" style="float:right">添加信息</el-button>
      </div>
      <el-table :data="studentList" border style="width: 100%" v-loading="loading">
        <el-table-column label="#" fixed type="index"></el-table-column>
        <el-table-column prop="name" label="姓名" width="150"></el-table-column>
        <el-table-column prop="sexv" label="性别" width="120"></el-table-column>
        <el-table-column prop="classname" label="班级" width="120"></el-table-column>
        <el-table-column prop="dormname" label="寝室号" width="120"></el-table-column>
        <el-table-column prop="cityText" label="城市" width="300"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="120"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button
              type="text"
              size="small"
              style="color:orange"
              @click="goEdit(scope.row.id)"
            >编辑</el-button>
            <el-button type="text" size="small" style="color:red" @click="godel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:30px; text-align:right"
        :current-page="page.start"
        :page-sizes="page.size"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalcount"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-card>

    <Detail
      ref="detail"
      @refresh-list="getStudentList"
      :dormList="dormList"
      :classList="classList"
    />
  </div>
</template>

<script>
// import axios from 'axios'
import Detail from "./Detail";
import { pickBy } from "@/utils/index";
// const host = 'http://www.bufantec.com'
// const settingFile = require("@/settings.js");

import { classList } from "@/api/system/clazz";
import {
  studentList,
  studentDetail,
  studentSave,
  studentUpdate,
  studentDel,
  xyCostList,
} from "@/api/system/student";
import { dormList } from "@/api/system/dorm";
import _ from "lodash";
// import { regionDataPlus, CodeToText } from "element-china-area-data";

export default {
  name: "sysStudent",
  components: {
    Detail,
  },
  data() {
    return {
      classList: [],
      search: {},
      value: "",
      studentList: [],
      loading: false,
      dormList: [],
      //实现数据跟着页面变化
      page: {
        start: 1,
        limit: 10,
        totalcount: 0,
        size: [10, 20, 30],
      },
    };
  },
  created() {
    this.getClassList();
    this.getStudentList();
    this.getdormList();
  },
  methods: {
    doReset() {
      this.search = {};
    },
    doSearch() {
      this.page.start = 1;
      this.getStudentList();
    },
    handleClick() {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.limit = val;
      this.getStudentList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.start = val;
      this.getStudentList();
    },
    goEdit(id) {
      this.$refs.detail.openDialogDetail(id);
    },
    godel(id) {
      //删除数据操作
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          studentDel({id}).then((res) => {
            var index = this.studentList.findIndex((item) => {
              return item.id == id;
            });
            this.studentList.splice(index, 1);
            this.getStudentList();  //删除数据后,重新渲染整个列表
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    getClassList() {
      // var url=`${settingFile.host}/admin/xy/clazz/list?start=1&limit=99`;
      // axios.get(url)
      // .then(res=>{
      //     this.classList=res.data.data.list
      //     // console.log(res.data.data.list);
      // })
      classList({
        start: this.page.start,
        limit: 99,
      }).then((res) => {
        this.classList = res.data.list;
      });
    },
    getStudentList() {
      // var url=`${settingFile.host}/admin/xy/student/list?start=${this.page.start}&limit=${this.page.limit}`
      // axios.get(url)
      // .then(res=>{
      //     this.studentList=res.data.data.list
      //     this.page.totalcount=res.data.data.totalRow
      //     console.log(this.studentList)
      // })
      this.loading = true;
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search,
      };
      // params=pickBy(params);
      params = _.pickBy(params, (item) => item); //去掉查询时候的冗余信息

      _.pickBy(params, function (v) {
        return v;
      });

      studentList(params).then((res) => {
        this.studentList = res.data.list;
        this.page.totalcount = res.data.totalRow;
        this.loading = false;
      });
    },
    getdormList() {
      dormList({
        start: this.page.start,
        limit: 99,
      }).then((res) => {
        this.dormList = res.data.list;
      });
    },
    addInfo() {
      // this.dialogVisible=true
      this.$refs.detail.openDialog();
    },
  },
};
</script>
<style lang='scss' scoped>
.box-card {
  margin: 30px;
}
.el-row:nth-child(2) {
  margin-top: 30px;
}
.searchbox {
  ::v-deep .el-input__inner {
    width: 220px;
  }
}
.tc {
  ::v-deep .el-input__inner {
    width: 165px;
  }
}
.box-card:nth-child(2) {
  margin-top: -1px;
}
</style>